<template>
  <div id="Amap" ref="Amap"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { initAmap , destroyAmap } from "./index.ts";
const Amap = ref(null);
const data = ref({
  key: "b59b0f4aa62bd543349d368d02f7b90d",
  code: "4aba3e0a2d9f21e907c23e3a362bb066",
});

onMounted(() => {
  if (Amap.value) {
    console.log(Amap.value);
    initAmap(data.value, Amap.value);
  }
});
onUnmounted(() => {
    destroyAmap(Amap.value)
});
</script>

<style lang="scss" scoped>
#Amap {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
